<template>
  <div class="salaryTable" :class="{ towRow: isTowRow }" ref="wrapper">
    <ux-grid ref="table" :size="size" :height="height" :edit-config="{ trigger: 'click', mode: 'cell' }" @selection-change="t_handleSelectionChange" @filter-change="t_filterChange">
      <ux-table-column type="checkbox" width="40px" fixed="left" :align="align" />
      <template v-for="item in tableTh">
        <ux-table-column :key="item.id" v-if="item.children.length" :title="item.name" :field="item.key" :align="align" min-width="100">
          <table-column v-for="o in item.children" :key="o.id" :title="o.name" :field="o.key" :align="align" :min-width="width" :type="o.type" :item-name="o.itemNamePy" />
        </ux-table-column>
        <table-column :key="item.id + 'else'" v-else :title="item.name" :field="item.key" :align="align" :min-width="width" :type="item.type" :item-name="item.itemNamePy" />
      </template>
    </ux-grid>
  </div>
</template>
<script>
import { tableMixins } from "./mixins/tableMixins"; // t_方法名
export default {
  name: "salaryTable",
  mixins: [tableMixins],
  data() {
    return {};
  },
  methods: {},
  mounted() {
    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     console.table(JSON.parse(JSON.stringify(this.headList)));
    //   }, 100);
    // });
  }
};
</script>
<style lang="less" scoped>
.salaryTable {
  height: 100%;
  :deep(.elx-grid),
  :deep(.elx-table),
  :deep(.elx-table--main-wrapper) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    .elx-table--body-wrapper {
      flex: 1;
    }
  }
  :deep( .elx-table--fixed-left-wrapper){
    // height: 100% !important;
    .elx-table--body-wrapper{
      top: 36px !important;
    }
  }
}
.towRow {
  :deep(.elx-table--header-wrapper) {
    min-height: 72px;
  }
  :deep( .elx-table--fixed-left-wrapper){
    .elx-table--body-wrapper{
      top: 72px !important;
    }
  }
}
</style>
